<%@ page pageEncoding="UTF-8"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="isperp" uri="/WEB-INF/tlds/isperp.tld"%>

<%
	String path = request.getContextPath();
%>
<link rel="stylesheet" type="text/css"
	href="<%=path%>/css/jcrop/jquery.Jcrop.css" />


<script src="<%=path%>/js/libs/jcrop/jquery.Jcrop.min.js"></script>
<script type="text/javascript">
	/**检查图片上传类型*/
	function checkImgType() {
		var obj = document.getElementById("photoImg");
		var imgFile = '';
		//获取图片的全路径  
		var imgFilePath = getImgFullPath(obj);
		var endIndex = imgFilePath.lastIndexOf("\\");
		var lastIndex = imgFilePath.length - endIndex - 1;
		if (endIndex != -1)
			imgFile = imgFilePath.substr(endIndex + 1, lastIndex);
		else
			imgFile = imgFilePath;

		var tag = true;
		endIndex = imgFilePath.lastIndexOf(".");
		if (endIndex == -1)
			tag = false;

		var ImgName = imgFilePath.substr(endIndex + 1, lastIndex);
		ImgName = ImgName.toUpperCase();

		if (ImgName != "GIF" && ImgName != "JPG" && ImgName != "PNG" && ImgName != "BMP") {
			tag = false;
		}
		if (!tag) {
			isperp.alert("文件类型必须为: *.gif,*.jpg,*.png,*.bmp，请重新选择！");
			return false;
		}
		isperp.submitForm({
			"formId" : "changePhotoForm",
			success : function(data) {
				setJcrop(data.path);
			}
		})
	}

	function getImgFullPath(obj) {
		if (obj) {
			if (window.navigator.userAgent.indexOf("MSIE") >= 1) {
				obj.select();
				return document.selection.createRange().text;
			} else if (window.navigator.userAgent.indexOf("Firefox") >= 1) {
				if (obj.files) {
					return obj.files.item(0).getAsDataURL();
				}
				return obj.value;
			}
			return obj.value;
		}
	}
</script>

<form id="changePhotoForm" method="post" enctype="multipart/form-data"
	action="fileUpload">
	<div class="header">
		<h2>更改头像图片</h2>
	</div>
	<table class="form-table">

		<tr>
			<td class="td1">图片文件：</td>
			<td class="td2"><input id="photoImg" name="imgFile" type="file"
				style="width:300px;"> <input type="button" class="sbutton"
				onclick="javascript:checkImgType();" value="上传" style="width:80px">
				<br>仅支持*.gif,*.jpg,*.png,*.bmp 格式</td>
		</tr>

	</table>


</form>
<form id="savePhotoForm" method="post" action="app/user/saveUserPhoto">
	<input name="id" type="hidden" value="${id }">
	<div style="padding:10px;width:95%;margin:10px auto">

		<div style="display:none">
			<label>X1 <input type="text" size="4" id="labelX"
				name="labelX" /> </label> <label>Y1 <input type="text" size="4"
				id="labelY" name="labelY" /> </label> <label>X2 <input type="text"
				size="4" id="labelX2" name="labelX2" /> </label> <label>Y2 <input
				type="text" size="4" id="labelY2" name="labelY2" /> </label> <label>W
				<input type="text" size="4" id="labelW" name="labelW" /> </label> <label>H
				<input type="text" size="4" id="labelH" name="labelH" /> </label>
		</div>

		<span id="imgCropSpam"></span>

	</div>

	<input type="hidden" id="x" name="x" /> <input type="hidden" id="y"
		name="y" /> <input type="hidden" id="x2" name="x2" /> <input
		type="hidden" id="y2" name="y2" /> <input type="hidden" id="w"
		name="w" /> <input type="hidden" id="h" name="h" /> <input
		type="hidden" id="width" name="width" /> <input type="hidden"
		id="height" name="height" /> <input type="hidden" id="imgPath"
		name="imgPath" value="${photo }" />

</form>
<script type="text/javascript">
	
	 
	function setJcrop(path){
		$("#imgCropSpam").empty();
		 var html="<img src='"+path+"' id='imgCrop' name='imgCrop' border='0' />";
		 $("#imgCropSpam").html(html); 
	 	 $('#imgCrop').Jcrop({
			allowSelect : false,
			setSelect : [ 0, 0, 150, 160 ],
			onChange : showCoords,
			onSelect : showCoords
		});
		
	}
	
	
	
	function showCoords(c) {
		$('#x').val(c.x);
		$('#y').val(c.y);
		$('#x2').val(c.x2);
		$('#y2').val(c.y2);
		$('#w').val(c.w);
		$('#h').val(c.h);

		$('#labelX').val(c.x);
		$('#labelY').val(c.y);
		$('#labelX2').val(c.x2);
		$('#labelY2').val(c.y2);
		$('#labelW').val(c.w);
		$('#labelH').val(c.h);

		//显示剪切按键  
		$('#cropTd').css("display", "");

	}

	function savePhoto() {
		
		var $img =$("#imgCrop");
		
		$("#imgPath").val($img.attr("src"));
		
		$("#width").val($img.width());
		$("#height").val($img.height());
		isperp.submitForm({
			"formId" : "savePhotoForm",
			success : function(data) {
				window.parent.location.reload();
			}
		});
	}
</script>


<c:if test="${not empty photo }">
	<script type="text/javascript">
	setJcrop('${photo}');
	</script>
</c:if>
<isperp:buttonList dialogId="photoDialog">
	<button onclick="savePhoto();" class="nui-mainbtn">保存</button>
</isperp:buttonList>


